<template>
  <div>
    <div style="height:788px">
      <el-table :data="contents">
        <el-table-column label="问题标题">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column label="问题描述" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.problemDescription
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="电话">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </template>
        </el-table-column>

        <el-table-column label="受理人">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.order.adminName
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="指派人">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.order.worker }}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系地址">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.addr}}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag
              style="margin-left: 10px"
              :type="scope.row.prolemstate == '已解决' ? 'success' : ''"
              >{{ scope.row.prolemstate }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="操作" width="170" style="text-align:center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-s-opportunity"
              size="mini"
              circle
              @click="showStep(scope.row)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-check"
              size="mini"
              circle
              v-if="scope.row.prolemstate == '处理中' ? true : false"
              @click="Problemfinish(scope.row)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-star-off"
              circle
              v-if="scope.row.prolemstate == '已解决' ? true : false"
              size="mini"
              @click="Rate(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="yema">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        ::current-page-sync="currentPage"
        :page-sizes="[8, 10, 15]"
        :page-size="pagesize"
        layout="total,jumper,prev, pager, next,sizes"
        :total="contents.length"
      ></el-pagination>
    </div>
    <div>
      <el-dialog :visible.sync="dialogFormVisible">
        <el-steps :active="state2 + 1">
          <el-step title="你的问题正在受理中" icon="el-icon-edit"> </el-step>
          <el-step title="正在等待工作人员" icon="el-icon-upload"></el-step>
          <el-step title="工作人员正在处理中" icon="el-icon-picture"></el-step>
          <el-step title="您的问题已解决" icon="el-icon-upload"></el-step>
        </el-steps>
      </el-dialog>
    </div>
    <el-dialog :visible.sync="dialogFormVisible2">
      <!-- {{value}} -->
      <el-form ref="form" :model="form" label-width="220px">
        <el-form-item label="您对本次服务的评价">
          <el-rate
            v-model="form.score"
            :colors="colors"
            style="float:left;margin-top:10px"
          >
          </el-rate>
          <span style="margin-left:90px"
            >你对本次服务的评分为：{{ form.score }} 分</span
          >
        </el-form-item>

        <el-form-item label="反馈内容">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" size="mini" @click="submit()"
            >提交</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="dialogFormVisible2 = false"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contents: [],
      currentPage: 1,
      pagesize: 8,
      state2: 0,
      username: this.$store.state.user.username,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      value: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],

      form: {
        orderId: "",
        content: "",
        score: 0,
      },
    };
  },
  mounted() {
    this.showTables();
  },
  methods: {
    showTables() {
      this.$axios({
        method: "get",
        params: {
          userName: this.username,
        },
        url: "/older/checkProblem",
      })
        .then((res) => {
          console.log(res);
          this.contents = res.data.result;

          var statelist = {
            0: "上诉中",
            1: "受理中",
            2: "处理中",
            3: "已解决",
            4: "已评价",
          };
          for (const item of this.contents) {
            item.prolemstate = statelist[item.prolemstate];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    showStep(row) {
      this.$axios({
        method: "get",
        params: {
          username: this.$store.state.user.username,
          powername: "power:showStep",
        },
        url: "/user/UserPower",
      })
        .then((res) => {
          if (res.data.code == 200) {
            var statelist = {
              上诉中: 0,
              受理中: 1,
              处理中: 2,
              已解决: 3,
              已评价: 4,
            };
            this.state2 = statelist[row.prolemstate];

            this.dialogFormVisible = true;
          } else {
            this.$message.success(res.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    Problemfinish(row) {
      if (confirm("您确定您的问题已解决了吗")) {
        this.$axios({
          method: "post",
          params: {
            id: row.id,
          },
          url: "/older/updateProblemState2",
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message.success("你已确定您的问题解决了");
              this.showTables();
            }
            this.showTables();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    Rate(row) {
      this.dialogFormVisible2 = true;
      console.log(row);
      this.form.orderId = row.order.id;
      this.form.problemId = row.id;
    },
    submit() {
      this.$axios({
        method: "post",
        data: this.form,
        url: "/feedBack/addfeedBackRate",
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("感谢您的评价");
            this.dialogFormVisible2 = false;
            this.showTables();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>
